<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的toggle和css等方法实现多层折叠与展开网页内容的特效</title>

<link href="css/z_public_style_0201.css" type="text/css" rel="stylesheet" />
<link href="css/z_index_style2.css" type="text/css" rel="stylesheet" />
<style>

</style>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>

</head>

<body>

<div id="z_index_201208">
  <div class="z_product_nav">
      <a class="qubu" href="">全部特卖</a> 
      <a class="" href="">护肤<span>(632)</span></a> 
      <a class="" href="">彩妆<span>(90)</span></a> 
      <a class="" href="">香水<span>(72)</span></a> 
      <a class="" href="">洗浴护体<span>(55)</span></a> 
      <a class="" href="">美发护发<span>(22)</span></a> 
      <a class="" href="">男士护理<span>(30)</span></a> 
      <a class="" href="">精油芳疗<span>(2)</span></a> 
      <a class="" href="">美容工具<span>(7)</span></a> 
      <!--当是全部时，显示【展开】-->
      <a class="zhankai" id="parentFilterPucker" onClick="showMore(this,'subFilterList')" href="javascript:void(0)">展开</a>
  </div>
  <div class="clear"></div>
  <div class="z_product_nav_open" id="subFilterList" style="display: none; "><!--品牌筛选-->
    <div class="nav_open">
        <p class="nav_open_tit"><a class="nav_open_tit1">按品牌筛选</a> <a class="nav_open_tit2" href="">全部</a> </p>
        <p class="nav_open_con">
        <a class="" href="">玫琳凯</a> <a class="" href="">欧莱雅</a> 
        <a class="" href="">美宝莲</a> <a class="" href="">迪奥</a> 
        <a class="" href="">雅诗兰黛</a> <a class="" href="">美体小铺（进口）</a> 
        <a class="" href="">THE FACE SHOP</a> <a class="" href="">谜尚</a> 
        <a class="" href="">韩国SKIN FOOD</a> <a class="" href="">蒙芭拉</a> 
        <a class="" href="">查名</a> 
        <!--全部数据-->
        <a class="dis_brand" style="display: none" href="" isshow="false">娥佩兰</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">火烈鸟</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">贝玲妃</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">DODO</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">SKIN79</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">卡姿兰</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">梦妆</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">丹姿</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">蜜丝佛陀</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">卡莉芙</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">高丝</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">Q-FACE</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">大嘴猴</a> 
        <a class="dis_brand" style="display: none" href="" isshow="false">依云</a>
        </p><!--当总数大于8时，才显示【展开更多】-->
        <p class="nav_open_open"><a class="more" id="more_brand" onClick="showFilter(this, 'dis_brand')" href="javascript:void(0)">展开更多</a></p>
    </div><!--分类筛选-->
    <div class="nav_open nav_center">
      <p class="nav_open_tit"><a class="nav_open_tit1">按分类筛选</a> <a class="nav_open_tit2" href="">全部</a> </p>
      <p class="nav_open_con"><a class="" href="">彩妆套装</a> <a class="" href="">唇部妆容</a> 
      <a class="" href="">面部妆容</a> <a class="" href="">眼部妆容</a> 
      <a class="" href="">面霜</a> 
      <a class="" href="">唇部护理</a> <a class="" href="">防晒隔离</a> 
      <a class="" href="">护肤套装</a> <a class="" href="">化妆水</a> <a class="" href="">精华</a> <a class="" href="">洁面</a> <a class="" href="">卸妆</a> <a class="" href="">面膜/面贴</a> <!--全部数据--><a class="dis_type" style="display: none" href="" isshow="false">眼部护理</a> <a class="dis_type" style="display: none" href="" isshow="false">乳液</a> <a class="dis_type" style="display: none" href="" isshow="false">精油</a> <a class="dis_type" style="display: none" href="" isshow="false">美发套装</a> <a class="dis_type" style="display: none" href="" isshow="false">秀发清洁</a> <a class="dis_type" style="display: none" href="" isshow="false">秀发养护</a> <a class="dis_type" style="display: none" href="" isshow="false">彩妆工具</a> <a class="dis_type" style="display: none" href="" isshow="false">护肤工具</a> </p><!--当总数大于8时，才显示【展开更多】-->
      <p class="nav_open_open"><a class="more" id="more_type" onClick="showFilter(this,'dis_type')" href="javascript:void(0)">展开更多</a></p>
    </div><!--功效筛选-->
    <div class="nav_open">
      <p class="nav_open_tit"><a class="nav_open_tit1">按功效筛选</a> <a class="nav_open_tit2" href="">全部</a> </p>
      <p class="nav_open_con"><a class="" href="">美容养颜</a> <a class="" href="">保湿补水</a> <a class="" href="">深层清洁</a> <a class="" href="">浓密</a> <a class="" href="">卷翘</a> <a class="" href="0-11.html">净化排毒</a> 
      <a class="" href="">晒后修护</a> <a class="" href="">消炎镇定</a> 
      <a class="" href="">美白</a> 
      <a class="" href="">祛眼袋</a> 
      <a class="" href="">防晒</a> 
      <a class="" href="">深层修复</a> <a class="" href="">盖斑遮瑕</a> 
      <a class="" href="">提亮肤色</a> <!--全部数据--><a class="dis_efficacy" style="display: none" href="" isshow="false">祛皱抗衰</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">调色</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">防水</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">不防水</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">深层修复</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">滋养去屑</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">清爽控油</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">柔顺亮泽</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">保湿</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">抗敏感</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">细致毛孔</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">隔离</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">丰胸美乳</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">去纹修复</a> <a class="dis_efficacy" style="display: none" href="" isshow="false">收腹</a> </p><!--当总数大于8时，才显示【展开更多】-->
      <p class="nav_open_open"><a class="more" id="more_efficacy" onClick="showFilter(this,'dis_efficacy')" href="javascript:void(0)">展开更多</a> </p>
    </div>
  </div>
</div>

<script  type="text/javascript">
//大类目收起
function showMore(me, id) {
  var txt= $(me).text();
  var cls = $(me).attr('class');
  $('#' + id).toggle();
  if (txt == "展开")
  {
	txt = "收起";
	cls = "shouqi";
  }
  else if (txt == "收起")
  {
	txt = "展开";
	cls = "zhankai";
  }
  $(me).text(txt);
  $(me).attr('class', cls);
}
  
//筛选项控制
function showFilter(me, id) {
  var txt = $(me).text();
  $('.' + id).each(function () {
	if ($(this).attr('isshow') == 'true')
	{
	  $(this).css('display', 'none');
	  $(this).attr('isshow', 'false');
	  txt = "展开更多";
	}
	else
	{
	  $(this).css('display', 'block');
	  $(this).attr('isshow', 'true');
	  txt = "收起更多";
	}
  });  
  $(me).text(txt);
}
</script>
</body>
</html>
